import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import Input from './input'
import List from './list'
import Button from './button'
import './todo.scss'
function App() {
  let [todo, setTodo] = useState('');
  let [list, setList] = useState([]);
  const submit = () => {
    console.log('提交啊')
    setList([{ id: Math.random(), val: todo }].concat(list))
    setTodo('')
  }
  const del = (id) => {
    // console.log(id)
    setList(list.filter(item => item.id !== id))
  }
  return <>
    <Input
      value={todo}
      onChange={(e) => setTodo(e.target.value)}
      onSubmit={submit}
    />
    <List data={list} render={(item => {
      return <>
        <h1>{item.val}</h1>
        <Button onClick={del.bind(null, item.id)}>删除</Button>
      </>
    })} />
    <List data={list} onDel={del.bind(null)} />
  </>
}

ReactDOM.render(<App />, document.getElementById('root'))